@import "_common.scss";
.navbar{
    position: fixed;
    width: 100%;
}
.carousel{
//  margin-top: -20px;
    padding-top: 50px;
}
.distant1{
//  padding-top: 30px;
//  background: #0078D7;
}
.hero-size{
    text-align: center;
}
@media (max-width: 767px) {
  .hero-size{
    display: none;
  }
}
.pic-size{
    text-align: right;
    h2{font-size: 30px;}
    p{font-size: 12px;
        color: #666666;
        margin-bottom: 0;
    }  
}
@media (max-width: 767px) {
  .pic-size{
    text-align: left;
  }
}
.pic-padding div{
    margin-top:30px ;
    img{border-radius: 10px;}
     img:hover{opacity: 0.8;}
}
.pic-size2{
    h2{font-size: 30px;}
    p{font-size: 12px;
        color: #666666;
        margin-bottom: 0;
    }  
}
@media (max-width: 767px) {
  .pic-size2{
    text-align: right;
  }
}
.my-pbto{
    padding-bottom: 30px;
}
.pic-padding2 div{
    margin-top:30px ;
    position: relative;
//  position: absolute;
    
    p{
        text-align: center;
    }
    img{border-radius: 10px;
        transition: 0.5s;
//      position: absolute;
//      z-index: 999;
    }
     img:hover{opacity: 0.8;transform: scale(1.04);
      cursor: pointer;
     }
     img:hover~.after1{
        cursor: pointer;
        display: block;
        
     }
}

 .after1{
     display: inline-block;     
     padding: 0 15px;
     color: #FFFFFF;
     padding-top: 10px;
     border-radius: 7px;
     position: absolute;
     top: -133px;
     display: none;
     animation: tt1 1s linear forwards alternate;
     background: rgba(0,0,0,.5);
      
 } 
 
@keyframes tt1{
    0%{
        transform: translateY(0px);
        display: none;
       
    }
    100%{
        transform:translateY(133px) scale(1.04);
        display:block;
        
    }
}


@media(min-width:991px) and (max-width:1200px) {
    .after1{
//     display: inline-block;
//     padding: 0 15px;
       width: 293px;
       height: 129px;
//      display: none;
//      opacity: 0;
    }
}
@media (min-width:1200px){
    .after1{ 
        height: 133px;
       width: 303px;
//      display: none;
//      opacity: 0;
        
    }
}
@media(max-width:991px) and (min-width:1px) {
    .after1{
        
        display: none;
        opacity: 0;
    }
}